window.addEventListener("load", function () {
  let apiTypeData = [
    { name: "全部", keyword: "身份证实名", isnew: false },
    { name: "生活服务", keyword: "银行卡", isnew: false },
    { name: "金融科技", keyword: "短信", isnew: false },
    { name: "交通地理", keyword: "天气", isnew: false },
    { name: "充值缴费", keyword: "短信", isnew: false },
    { name: "数据智能", keyword: "手机归属地", isnew: false },
    { name: "企业工商", keyword: "IP", isnew: false },
    { name: "应用开发", keyword: "手机归属地", isnew: false },
    { name: "电子商务", keyword: "IP", isnew: false },
    { name: "吃喝玩乐", keyword: "视频", isnew: false },
    { name: "文娱视频", keyword: "视频", isnew: false },
    { name: "免费接口大全", keyword: "短信", isnew: true },
    { name: "短信", keyword: "身份证实名", isnew: false },
    { name: "汽车", keyword: "银行卡", isnew: false },
    { name: "核验", keyword: "银行卡", isnew: false },
    { name: "最新发布", keyword: "银行卡", isnew: true },
    { name: "API私有化部署", keyword: "身份证实名", isnew: true },
  ];
  // <li class="" >${v.keyword}</li>
  //    console.log( $("#APIclassify .container ul"));
  apiTypeData.forEach(function (v) {
    // console.log(v);
    $("#APIclassify .container>ul").innerHTML += `
        <li ${v.isnew ? "class=fw" : ""} title="${v.keyword}">${v.name}</li>
        `;
  });

  const lis = $("#APIclassify>.container>ul>li");
  // console.log(lis);
  // 点击切换颜色
  lis.forEach(function (v) {
    // console.log(v);
    // 每一个li添加点击事件
    v.addEventListener("click", function () {
      // 一刀切
      // lis.forEach(function(v1){
      //    console.log(v1);
      // });
      lis.forEach(function (v1) {
        // console.log(v1);
        v1.classList.remove("on"); //一刀切清除所有on
      });
      // 点击添加on
      this.classList.add("on");
      // strong对应的Content
      //   console.log($(".APIindex>strong"));
      console.log($(".APIindex>strong"));
      $(".APIindex>strong").textContent = this.textContent;
      // inout.value的值赋给title
      $(".APIindex>input").value = this.title;
    });
  });

  //API列表区域 模拟服务器返回的数据
  let listDataArr = [
    //第一行
    {
      img: "API_01.jpg",
      name: "2021出行防疫政策指南",
      price: "免费",
      isSpecial: false,
    },
    {
      img: "API_02.jpg",
      name: "身份证实名认证",
      price: "￥0.2000/次",
      isSpecial: true,
    },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    {
      img: "API_04.jpg",
      name: "银行卡四元素校验",
      price: "￥0.3360/次",
      isSpecial: true,
    },
    {
      img: "API_05.jpg",
      name: "短信API服务",
      price: "￥0.0400/次",
      isSpecial: true,
    },

    //第二行
    {
      img: "API_01.jpg",
      name: "2021出行防疫政策指南",
      price: "免费",
      isSpecial: false,
    },
    {
      img: "API_02.jpg",
      name: "身份证实名认证",
      price: "￥0.2000/次",
      isSpecial: true,
    },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    {
      img: "API_04.jpg",
      name: "银行卡四元素校验",
      price: "￥0.3360/次",
      isSpecial: true,
    },
    {
      img: "API_05.jpg",
      name: "短信API服务",
      price: "￥0.0400/次",
      isSpecial: true,
    },
    //第三行
    {
      img: "API_01.jpg",
      name: "2021出行防疫政策指南",
      price: "免费",
      isSpecial: false,
    },
    {
      img: "API_02.jpg",
      name: "身份证实名认证",
      price: "￥0.2000/次",
      isSpecial: true,
    },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    {
      img: "API_04.jpg",
      name: "银行卡四元素校验",
      price: "￥0.3360/次",
      isSpecial: true,
    },
    {
      img: "API_05.jpg",
      name: "短信API服务",
      price: "￥0.0400/次",
      isSpecial: true,
    },
    //第四行
    {
      img: "API_01.jpg",
      name: "2021出行防疫政策指南",
      price: "免费",
      isSpecial: false,
    },
    {
      img: "API_02.jpg",
      name: "身份证实名认证",
      price: "￥0.2000/次",
      isSpecial: true,
    },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    {
      img: "API_04.jpg",
      name: "银行卡四元素校验",
      price: "￥0.3360/次",
      isSpecial: true,
    },
    {
      img: "API_05.jpg",
      name: "短信API服务",
      price: "￥0.0400/次",
      isSpecial: true,
    },
  ];
  // 遍历
  // listDataArr.forEach(function (v) {
  //   // 将遍历的html添加到指定的位置
  //   $("main>.container>ul").innerHTML += `
  //       <li>
  //           <img src="./imgs/${v.img}" alt="" />
  //           <p>${v.name}/p>
  //           <h1 class=${v.isSpecial ? "sgreen" : "sred"}>${v.price}</h1>
  //           <a href="">申请数据</a>
  //         </li>
  //       `;
  // });

  // // 分页器
  // $("#APIindex li").forEach(function (v) {
  //   // console.log(this);
  //   v.addEventListener("click", function () {
  //     console.log("2", this);
  //     // 一刀切
  //     $("#APIindex li").forEach(function (e) {
  //        e.classList.remove("active")
  //     })
  //      v.classList.add("active")
  //   });

  // });

  const totalSize = listDataArr.length; //总条数 数据总数量
  const pageSize = 5; //每条页数
  const pageNumber = Math.ceil(totalSize / pageSize);   //页数=总条数/每页条数
  // for (let i = 1; i < pageNumber; i++) {
  //   // 创建li
  //   let liNeod = this.document.createElement("li");
  //   liNeod.textContent = i;
  //   i === 1 && (liNeod.classList=("active"))
  //   // 将创建好的li放入ul中
  //   $("#APIindex>ul").append(liNeod)
  // }
  // console.log(listDataArr);
  for (let i = 1; i < pageNumber; i++) {
    let li = this.document.createElement("li")
    li.textContent = i;
    i === 1 && (li.classList = "active")
    $("#APIindex>ul").append(li)
  }
  // 功能2
  // 事件委派
	// render(1, pageSize); // 页码加载时渲染第一页

  // 1给祖先元素ul绑定事件
  $("#APIindex ul").addEventListener("click", function (event) {
    // console.log(event);
    if (event.target.nodeName === "LI") {
      $("#APIindex li").forEach(function (e) {
        e.classList.remove("active")
      })
      event.target.classList.add("active")
      // console.log(event.target.textContent);
      // 分页原理:slice(开始索引,结束索引) 
      // 点击分页器后动态渲染选项卡
      // 页码
      const pageNode = Number(event.target.textContent);
      console.log(pageNode);
      // 开始索引  (页码-1)*每条数    
      const pagtop = (pageNode - 1) * pageSize
      // console.log(pagtop);
      // // 结束索引  页码*每页条数
      const pagindex = pageNode * pageSize
      // // console.log(pagindex);
      let result = listDataArr.slice(pagtop, pagindex)
      //  console.log(snm);
      // 排他思想,渲染前先清空选项卡区
      $("main>.container>ul").innerHTML = "";

      result.forEach(function (v) {
        $("main>.container>ul").innerHTML += `
        <li id="li">
            <img src="./imgs/${v.img}" alt="" />
            <p>${v.name}/p>
            <h1 class=${v.isSpecial ? "sgreen" : "sred"}>${v.price}</h1>
            <a  href="">申请数据</a>
          </li>
        `;
      })
      // render (Number(event.target.textContent),pageSize);
    };
  });
 
  $("main>.container>ul").addEventListener("click", function (e) {
    // 反差事件源通过e.target.nodeName去判断
    if (e.target.nodeName === "A") {
      // alert("登录")
      $("#mask").style.display = "block"
    }
    $("#mask").forEach(function (v) {
          this.style.display="none"
    })
  })

});
